<!DOCTYPE html>
<html lang=zh>
<head>
    <meta charset="utf-8">
    
    <title>组件基础 | Hexo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="组件基础基本使用 组件要有一个根元素把子元素包住 组件可以多次使用，而且组件里面数据都是当前组件独享的moment，不关别的组件的事，即使它们的名字是一样的 在使用模板字符串的时候，可以使用单引号、双引号、反引号（ &#96;&#96;），为了模板字符串格式好看，推荐使用反引号  全局注册组件 全局注册的组件可以用在任意的 Vue 根实例中（ new Vue ( { }) ）  使用 Vue.componen">
<meta property="og:type" content="article">
<meta property="og:title" content="组件基础">
<meta property="og:url" content="http://dsjerry.gitee.io/mousejerry/2020/04/03/%E8%87%AA%E5%AD%A6Vue-%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="组件基础基本使用 组件要有一个根元素把子元素包住 组件可以多次使用，而且组件里面数据都是当前组件独享的moment，不关别的组件的事，即使它们的名字是一样的 在使用模板字符串的时候，可以使用单引号、双引号、反引号（ &#96;&#96;），为了模板字符串格式好看，推荐使用反引号  全局注册组件 全局注册的组件可以用在任意的 Vue 根实例中（ new Vue ( { }) ）  使用 Vue.componen">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2020-04-03T01:36:19.000Z">
<meta property="article:modified_time" content="2020-07-21T08:59:46.868Z">
<meta property="article:author" content="smalljerry">
<meta property="article:tag" content="js">
<meta property="article:tag" content="vue">
<meta name="twitter:card" content="summary">
    

    
        <link rel="alternate" href="/" title="Hexo" type="application/atom+xml" />
    

    
        <link rel="icon" href="/mousejerry/css/images/ghaseminya.png" />
    

    
<link rel="stylesheet" href="/mousejerry/libs/font-awesome/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/mousejerry/libs/open-sans/styles.css">

    
<link rel="stylesheet" href="/mousejerry/libs/source-code-pro/styles.css">


    
<link rel="stylesheet" href="/mousejerry/css/style.css">


    
<script src="/mousejerry/libs/jquery/2.1.3/jquery.min.js"></script>

    
    
        
<link rel="stylesheet" href="/mousejerry/libs/lightgallery/css/lightgallery.min.css">

    
    
        
<link rel="stylesheet" href="/mousejerry/libs/justified-gallery/justifiedGallery.min.css">

    
    
    
    


<meta name="generator" content="Hexo 5.0.0"></head>

<body>
    <div id="container">
        <header id="header">
    <div id="header-main" class="header-inner">
        <div class="outer">
            <a href="/mousejerry/" id="logo">
                <i class="logo"></i>
                <span class="site-title">Hexo</span>
            </a>
            <nav id="main-nav">
                
                    <a class="main-nav-link" href="/mousejerry/.">首页</a>
                
                    <a class="main-nav-link" href="/mousejerry/archives">归档</a>
                
                    <a class="main-nav-link" href="/mousejerry/categories">分类</a>
                
                    <a class="main-nav-link" href="/mousejerry/tags">标签</a>
                
                    <a class="main-nav-link" href="/mousejerry/about">关于</a>
                
            </nav>
            
                
                <nav id="sub-nav">
                    <div class="profile" id="profile-nav">
                        <a id="profile-anchor" href="javascript:;">
                            <img class="avatar" src="https://avatars2.githubusercontent.com/u/53891546?s=460&amp;u=6f987551976f2fcd6f2f49ab5b714fb72671f902&amp;v=4" />
                            <i class="fa fa-caret-down"></i>
                        </a>
                    </div>
                </nav>
            
            <div id="search-form-wrap">

    <form class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
        <button type="submit" class="search-form-submit"></button>
    </form>
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="想要查找什么..." />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/mousejerry/',
        CONTENT_URL: '/mousejerry/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/mousejerry/js/insight.js"></script>


</div>
        </div>
    </div>
    <div id="main-nav-mobile" class="header-sub header-inner">
        <table class="menu outer">
            <tr>
                
                    <td><a class="main-nav-link" href="/mousejerry/.">首页</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/archives">归档</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/categories">分类</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/tags">标签</a></td>
                
                    <td><a class="main-nav-link" href="/mousejerry/about">关于</a></td>
                
                <td>
                    
    <div class="search-form">
        <input type="text" class="ins-search-input search-form-input" placeholder="搜索" />
    </div>

                </td>
            </tr>
        </table>
    </div>
</header>

        <div class="outer">
            
                

<aside id="profile">
    <div class="inner profile-inner">
        <div class="base-info profile-block">
            <img id="avatar" src="https://avatars2.githubusercontent.com/u/53891546?s=460&amp;u=6f987551976f2fcd6f2f49ab5b714fb72671f902&amp;v=4" />
            <h2 id="name">SmallJerry</h2>
            <h3 id="title">————</h3>
            <span id="location"><i class="fa fa-map-marker"></i>Mar</span>
            <a id="follow" target="_blank" href="https://github.com/dsjerry">关注我</a>
        </div>
        <div class="article-info profile-block">
            <div class="article-info-block">
                18
                <span>文章</span>
            </div>
            <div class="article-info-block">
                18
                <span>标签</span>
            </div>
        </div>
        
        <div class="profile-block social-links">
            <table>
                <tr>
                    
                    
                    <td>
                        <a href="https://github.com/dsjerry" target="_blank" title="github" class=tooltip>
                            <i class="fa fa-github"></i>
                        </a>
                    </td>
                    
                    <td>
                        <a href="/mousejerry/" target="_blank" title="rss" class=tooltip>
                            <i class="fa fa-rss"></i>
                        </a>
                    </td>
                    
                </tr>
            </table>
        </div>
        
    </div>
</aside>

            
            <section id="main"><article id="post-自学Vue-组件基础" class="article article-type-post" itemscope itemprop="blogPost">
    <div class="article-inner">
        
        
            <header class="article-header">
                
    
        <h1 class="article-title" itemprop="name">
            组件基础
        </h1>
    

                
                    <div class="article-meta">
                        
    <div class="article-date">
        <i class="fa fa-calendar"></i>
        <a href="/mousejerry/2020/04/03/%E8%87%AA%E5%AD%A6Vue-%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80/">
            <time datetime="2020-04-03T01:36:19.000Z" itemprop="datePublished">2020-04-03</time>
        </a>
    </div>


                        
    <div class="article-category">
    	<i class="fa fa-folder"></i>
        <a class="article-category-link" href="/mousejerry/categories/%E8%87%AA%E5%B7%B1%E5%AD%A6%E4%B9%A0/">自己学习</a>
    </div>

                        
    <div class="article-tag">
        <i class="fa fa-tag"></i>
        <a class="tag-link-link" href="/mousejerry/tags/js/" rel="tag">js</a>, <a class="tag-link-link" href="/mousejerry/tags/vue/" rel="tag">vue</a>
    </div>

                    </div>
                
            </header>
        
        
        <div class="article-entry" itemprop="articleBody">
        
            
            <!-- @format -->

<h3 id="组件基础基本使用"><a href="#组件基础基本使用" class="headerlink" title="组件基础基本使用"></a>组件基础基本使用</h3><ul>
<li>组件要有一个根元素把子元素包住</li>
<li>组件可以多次使用，而且组件里面数据都是当前组件独享的moment，不关别的组件的事，即使它们的名字是一样的</li>
<li>在使用模板字符串的时候，可以使用单引号、双引号、反引号（ ``），为了模板字符串格式好看，推荐使用反引号</li>
</ul>
<h4 id="全局注册组件"><a href="#全局注册组件" class="headerlink" title="全局注册组件"></a>全局注册组件</h4><ul>
<li><p>全局注册的组件可以用在任意的 Vue 根实例中（ new Vue ( { }) ）</p>
</li>
<li><p>使用 <em>Vue.component( “组件名”, “ { 模板字符串等内容 } “)</em></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">my-com</span>&gt;</span><span class="tag">&lt;/<span class="name">my-com</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    Vue.component(<span class="string">&quot;myCom&quot;</span>, &#123;</span></span><br><span class="line">        data()&#123;</span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123;</span></span><br><span class="line"><span class="javascript">                msg: <span class="string">&quot;加油加油。&quot;</span></span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line"><span class="handlebars"><span class="xml">        template: &quot;<span class="tag">&lt;<span class="name">h1</span>&gt;</span>我是一个模板字符串，学习很快乐！<span class="tag">&lt;/<span class="name">h1</span>&gt;</span>&quot;</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        el: <span class="string">&quot;#app&quot;</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><p>在全局注册的时候使用的是 <em>驼峰法</em> 或者加 <em>-</em>  ，按时在使用的时候只能是加 <em>-</em> ，局部注册也一样</p>
</li>
<li><p>data 和实例 vue 不一样，这里的 data 是一个方法，返回一个对象，数据在里面</p>
<a id="more"></a>

</li>
</ul>
</li>
</ul>
<h4 id="局部注册组件"><a href="#局部注册组件" class="headerlink" title="局部注册组件"></a>局部注册组件</h4><ul>
<li><p>只能在当前注册了这个组件的 Vue 中使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">my-com</span>&gt;</span><span class="tag">&lt;/<span class="name">my-com</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> login = &#123;</span></span><br><span class="line"><span class="handlebars"><span class="xml">        tempalte:`<span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">                <span class="tag">&lt;<span class="name">h3</span>&gt;</span>努力<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">            <span class="tag">&lt;<span class="name">h3</span>&gt;</span>奋斗<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span>`</span></span></span><br><span class="line">    &#125;</span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        el: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line">        data: &#123;&#125;,</span><br><span class="line">        componentss: &#123;</span><br><span class="line"><span class="javascript">            <span class="string">&quot;my-com&quot;</span>: login</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<h3 id="父组件向子组件传值"><a href="#父组件向子组件传值" class="headerlink" title="父组件向子组件传值"></a>父组件向子组件传值</h3><blockquote>
<p>使用 props</p>
</blockquote>
<ul>
<li><p>在子组件定义一个 <em>props</em> 可以用字符串数组的形式列出，也可以用对象的形式列出</p>
</li>
<li><p>在需要绑定的组件上加上 <em>props</em> 中写好的值，可以静态绑定，即是没有 <em>v-bind</em> 你给它什么值就是什么值, 动态绑定 <em>v-bind</em> 简写为,它的值是父组件 data 中的值</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">my-h1</span> <span class="attr">title</span>=<span class="string">&quot;msg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">my-h1</span> <span class="attr">:title</span>=<span class="string">&quot;msg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-h1</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(<span class="string">&quot;myH1&quot;</span>, &#123;</span><br><span class="line">    props: [<span class="string">&quot;title&quot;</span>, <span class="string">&quot;title1&quot;</span>],</span><br><span class="line">    template: <span class="string">`</span></span><br><span class="line"><span class="string">        &lt;div&gt;</span></span><br><span class="line"><span class="string">          &lt;h1&gt;&#123;&#123;title&#125;&#125;&lt;/h1&gt;</span></span><br><span class="line"><span class="string">          &lt;h1&gt;&#123;&#123;title1&#125;&#125;&lt;/h1&gt;</span></span><br><span class="line"><span class="string">        &lt;/div&gt;</span></span><br><span class="line"><span class="string">`</span></span><br><span class="line">&#125;);</span><br><span class="line"><span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    el: <span class="string">&quot;#app&quot;</span>,</span><br><span class="line">    data: &#123;</span><br><span class="line">        msg: <span class="string">&quot;hello prop&quot;</span>,</span><br><span class="line">&#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h3 id="子组件向父组件传值"><a href="#子组件向父组件传值" class="headerlink" title="子组件向父组件传值"></a>子组件向父组件传值</h3><ul>
<li><p>子组件使用 <em>$emit</em> 触发事件</p>
</li>
<li><p><em>$emit</em> 的第一个参数为自定义对象的名称，第二个参数是要传递的数据</p>
</li>
<li><p>父组件使用 <em>v-on</em> 监听子组件的事件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">:style</span>=<span class="string">&quot;fontSize: fontSize + &#x27;px&#x27; &quot;</span>&gt;</span> &#123;&#123;msg&#125;&#125; <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">my-com</span> @<span class="attr">enlage-font</span>=<span class="string">&#x27;handle($event)&#x27;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-com</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    Vue.component(<span class="string">&quot;myCom&quot;</span>, &#123;</span></span><br><span class="line">        template: `</span><br><span class="line"><span class="handlebars"><span class="xml">        <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;$emit(&#x27;enlageFont&#x27;, 10)&quot;</span>&gt;</span>你点一下试试<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span></span><br><span class="line">`</span><br><span class="line">    &#125;)</span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="javascript">        el: <span class="string">&quot;#app&quot;</span>,</span></span><br><span class="line">        data: &#123;</span><br><span class="line">            msg: &quot;加油加油“,</span><br><span class="line">            fontSize: 10</span><br><span class="line">        &#125;,</span><br><span class="line">        methods: &#123;</span><br><span class="line"><span class="javascript">            handle: <span class="function"><span class="keyword">function</span>(<span class="params">val</span>)</span>&#123;</span></span><br><span class="line"><span class="javascript">                <span class="built_in">this</span>.fontSize += val;</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p>和使用 props 传值很像</p>
</li>
<li><p>假如我有定义一个方法，需要修改页面的值，但是页面的值来自父组件。这是就需要使用事件抛出一个值</p>
<p>在子组件中,比如我想删除列表中的一项数据（这个就好比是子组件中的<em>props</em>）,可以是表达式，也可以抛出一个对象（{id: id, type=”del”}）</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">del: <span class="function"><span class="keyword">function</span>(<span class="params">id</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.$emit(<span class="string">&quot;cart-del&quot;</span>, id);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>然后，父组件中(这个就好比是data中的数据)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">delCart: <span class="function"><span class="keyword">function</span>(<span class="params">id</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> index = <span class="built_in">this</span>.goodList.findIndex(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> item.id == id;</span><br><span class="line">&#125;);</span><br><span class="line">    <span class="built_in">this</span>.goodList.splice(index, <span class="number">1</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>最后就像<em>props</em>一样，在标签汇中绑定。（<em>props</em>用<em>v-bind</em>，这里用<em>v-on</em>）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">cart-list</span> @<span class="attr">cartDel</span>=<span class="string">&quot;del-cart($event)&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">cart-list</span>&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h3 id="组件插槽"><a href="#组件插槽" class="headerlink" title="组件插槽"></a>组件插槽</h3><ul>
<li>自定义组件，在使用的时候不能在其中插入东西，所以要使用 <em>组件插槽</em> </li>
<li>感觉就相当于一个占位符</li>
<li>当组件开始渲染的时候，<em>slot</em>  会被替换成 <em>芜湖</em> </li>
</ul>
<h4 id="匿名插槽"><a href="#匿名插槽" class="headerlink" title="匿名插槽"></a>匿名插槽</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">test</span>&gt;</span>芜湖<span class="tag">&lt;/<span class="name">test</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    Vue.component(<span class="string">&#x27;test&#x27;</span>, &#123;</span></span><br><span class="line">        data()&#123;</span><br><span class="line"><span class="javascript">            <span class="keyword">return</span> &#123; <span class="attr">name</span>: <span class="string">&quot;张三&quot;</span> &#125;</span></span><br><span class="line">        &#125;</span><br><span class="line"><span class="handlebars"><span class="xml">        template: `<span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">            <span class="tag">&lt;<span class="name">strong</span>&gt;</span>起飞~<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">            <span class="tag">&lt;<span class="name">slot</span>&gt;</span><span class="tag">&lt;<span class="name">slot</span>&gt;</span></span></span></span><br><span class="line"><span class="handlebars"><span class="xml">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span>`</span></span></span><br><span class="line">    &#125;)</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>插槽内不仅可以放文本，还可以放 HTML、其他自定义组件</li>
<li>如果没有 slot 标签，自定义的内容将不会显示</li>
</ul>
<h4 id="插槽传值以及值得作用域"><a href="#插槽传值以及值得作用域" class="headerlink" title="插槽传值以及值得作用域"></a>插槽传值以及值得作用域</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">test</span> <span class="attr">url</span>=<span class="string">&quot;/aoligei&quot;</span>&gt;</span></span><br><span class="line">    &#123;&#123; name &#125;&#125;</span><br><span class="line">    &#123;&#123; url &#125;&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">test</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><p>插槽和模板中的其他兄弟一样，他们能访问到相同作用域的值</p>
</li>
<li><p>上面的值中， <em>name</em> 是可以取得到值得，但是 <em>url</em> 不行，并且显示 undefined。因为 url 已经不是哥儿们了，url的值是传给 test 组件的</p>
<blockquote>
<p>父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。</p>
</blockquote>
</li>
</ul>
<h4 id="后备内容"><a href="#后备内容" class="headerlink" title="后备内容"></a>后备内容</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在body中--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">test</span>&gt;</span><span class="tag">&lt;/<span class="name">test</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 在模板中--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">slot</span>&gt;</span>Submit<span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>如果就这样，显示的是 Submit，如果在 <em>test</em> 里面加上 save ，那 submit 就变成 save</li>
</ul>
<h4 id="具名插槽"><a href="#具名插槽" class="headerlink" title="具名插槽"></a>具名插槽</h4><ul>
<li><p>当使用了好多个插槽的时候，可以给插槽起个名字</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在模板中 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">header</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;header&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">header</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">session</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">slot</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">session</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">footer</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;fotter&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>不没 <em>name</em> 的 slot 被人取了个花名叫 “default”</li>
</ul>
</li>
<li><p>使用的时候，要在标签中加一个 <em>template</em> 元素，并且在里面使用 <strong>v-slot</strong> 绑定，简写 <strong>#</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在body中(继续用上面的test组件做例子) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">tset</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:header</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">h1</span>&gt;</span>加油啊<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">p</span>&gt;</span>好好学习天天向上<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:footer</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">p</span>&gt;</span>每天都是好心情<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">tset</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>这样 slot 就为它命中注定的那个 template 占了位置</li>
</ul>
</li>
</ul>
<h4 id="作用域插槽"><a href="#作用域插槽" class="headerlink" title="作用域插槽"></a>作用域插槽</h4><ul>
<li><p>父组件对子组件加工处理</p>
</li>
<li><p>即可复用子组件的 slot，也可以使得 slot 的内容不一样</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在模板中 ○ --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">slot</span>&gt;</span> &#123;&#123;user.lastName&#125;&#125; <span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><p>然后，我不想使用 lastName 了，我想换个东西</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在body中 ※ --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">test</span>&gt;</span> &#123;&#123;user.firstName&#125;&#125; <span class="tag">&lt;/<span class="name">test</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><em>这样是不行的</em>，因为在 test 中，他们已经不是 slot 的好兄弟了</li>
</ul>
</li>
<li><p>为了让 <em>user</em> 在父级的插槽内容中可用，我们可以将 <em>user</em> 作为 <em><slot></em> 元素的一个 attribute 绑定上去：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在模板中 ○ --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">slot</span> <span class="attr">v-bind:user</span>=<span class="string">&quot;user&quot;</span>&gt;</span> &#123;&#123;user.lastName&#125;&#125; <span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li>这个绑定在 <em>slot</em> 上的属性叫作 <strong>插槽prop</strong></li>
</ul>
</li>
<li><p>然后就可以使用带值的 v-slot 来定义 插槽prop 的名字了：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 在body中 ※ --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">test</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:default</span>=<span class="string">&quot;slotProps&quot;</span>&gt;</span></span><br><span class="line">        &#123;&#123; slotProps.user.first &#125;&#125;</span><br><span class="line">    <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">test</span>&gt;</span></span><br></pre></td></tr></table></figure>

<ul>
<li><em>slotProps</em> 名字随便取</li>
<li>因为 slot 没有名字，所以 这里使用了 <em>default</em> 作为 slot 的属性</li>
<li>如果是没名字，可以直接使用不带参数，也就是直接 <code>v-slot=&quot;slotProps&quot;</code> </li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 id="一些笔记"><a href="#一些笔记" class="headerlink" title="一些笔记"></a>一些笔记</h3><ol>
<li>$event<br> 通过在方法后面加个 <em>$event</em> 可以访问原生事件对象。比如：</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> @<span class="attr">blur</span>=<span class="string">&quot;warn(&#x27;hahaha&#x27;, $event)&quot;</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>  在js中定义方法warn</p>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">warn: <span class="function"><span class="keyword">function</span>(<span class="params">msg, event</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(msg);</span><br><span class="line">    <span class="built_in">console</span>.log(event.target.value);</span><br><span class="line">   <span class="comment">//  获取到input的值</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<ol start="2">
<li><p>在字符串模板中，包含模板的是 <em>`</em> 斜点，而不是单引号或者双引号</p>
</li>
<li><p>findIndex和some是遍历数组的。</p>
</li>
</ol>
<blockquote>
<p>语法：array.findIndex(function (currentValue, index, arr), thisValue)  </p>
</blockquote>
<blockquote>
<p><em>currentValue</em> 是必选参数</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> index = <span class="built_in">this</span>.goodList.findIndex(<span class="function"><span class="params">item</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> item.id == id;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

        
        </div>
        <footer class="article-footer">
            <div class="share-container">



    <div class="a2a_kit a2a_default_style">
    <a class="a2a_dd" target="_blank" rel="noopener" href="https://www.addtoany.com/share">分享到</a>
    <span class="a2a_divider"></span>
    <a class="a2a_button_wechat" title="微信"></a>
    <a class="a2a_button_sina_weibo" title="微博"></a>
    <a class="a2a_button_email" title="邮件"></a>
    <a class="a2a_button_qzone" title="QQ空间"></a>
    <!--    <a class="a2a_button_pinterest"></a>-->
<!--    <a class="a2a_button_tumblr"></a>-->
</div>
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
<style>
    .a2a_menu {
        border-radius: 4px;
    }
    .a2a_menu a {
        margin: 2px 0;
        font-size: 14px;
        line-height: 16px;
        border-radius: 4px;
        color: inherit !important;
        font-family: 'Microsoft Yahei';
    }
    #a2apage_dropdown {
        margin: 10px 0;
    }
    .a2a_mini_services {
        padding: 10px;
    }
    a.a2a_i,
    i.a2a_i {
        width: 122px;
        line-height: 16px;
    }
    a.a2a_i .a2a_svg,
    a.a2a_more .a2a_svg {
        width: 16px;
        height: 16px;
        line-height: 16px;
        vertical-align: top;
        background-size: 16px;
    }
    a.a2a_i {
        border: none !important;
    }
    a.a2a_menu_show_more_less {
        margin: 0;
        padding: 10px 0;
        line-height: 16px;
    }
    .a2a_mini_services:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .a2a_mini_services{*+height:1%;}
</style>


</div>

            
    
        <a href="http://dsjerry.gitee.io/mousejerry/2020/04/03/%E8%87%AA%E5%AD%A6Vue-%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80/#comments" class="article-comment-link disqus-comment-count" data-disqus-url="http://dsjerry.gitee.io/mousejerry/2020/04/03/%E8%87%AA%E5%AD%A6Vue-%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80/">评论</a>
    

        </footer>
    </div>
    
        
<nav id="article-nav">
    
        <a href="/mousejerry/2020/04/18/webpack-D1/" id="article-nav-newer" class="article-nav-link-wrap">
            <strong class="article-nav-caption">上一篇</strong>
            <div class="article-nav-title">
                
                    webpack D1
                
            </div>
        </a>
    
    
        <a href="/mousejerry/2020/03/06/MYFirstBlog/" id="article-nav-older" class="article-nav-link-wrap">
            <strong class="article-nav-caption">下一篇</strong>
            <div class="article-nav-title">MYFirstBlog</div>
        </a>
    
</nav>


    
</article>


    
    <section id="comments">
    
        
    <div id="disqus_thread">
        <noscript>Please enable JavaScript to view the <a target="_blank" rel="noopener" href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>

    
    </section>

</section>
            
                <aside id="sidebar">
   
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签云</h3>
        <div class="widget tagcloud">
            <a href="/mousejerry/tags/PHP/" style="font-size: 13.33px;">PHP</a> <a href="/mousejerry/tags/apache/" style="font-size: 10px;">apache</a> <a href="/mousejerry/tags/express/" style="font-size: 10px;">express</a> <a href="/mousejerry/tags/js/" style="font-size: 13.33px;">js</a> <a href="/mousejerry/tags/node-js/" style="font-size: 10px;">node.js</a> <a href="/mousejerry/tags/php/" style="font-size: 16.67px;">php</a> <a href="/mousejerry/tags/python/" style="font-size: 10px;">python</a> <a href="/mousejerry/tags/vscode-%E6%8F%92%E4%BB%B6/" style="font-size: 10px;">vscode,插件</a> <a href="/mousejerry/tags/vue/" style="font-size: 20px;">vue</a> <a href="/mousejerry/tags/vuex/" style="font-size: 10px;">vuex</a> <a href="/mousejerry/tags/webpack/" style="font-size: 10px;">webpack</a> <a href="/mousejerry/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 10px;">前端</a> <a href="/mousejerry/tags/%E5%90%8E%E7%AB%AF/" style="font-size: 10px;">后端</a> <a href="/mousejerry/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 10px;">微信小程序</a> <a href="/mousejerry/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 10px;">数据结构</a> <a href="/mousejerry/tags/%E6%B5%8B%E8%AF%95/" style="font-size: 10px;">测试</a> <a href="/mousejerry/tags/%E7%88%AC%E8%99%AB/" style="font-size: 10px;">爬虫</a> <a href="/mousejerry/tags/%E9%9A%8F%E7%AC%94/" style="font-size: 10px;">随笔</a>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">分类</h3>
        <div class="widget">
            <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E6%8A%80%E5%B7%A7%E5%AD%A6%E4%B9%A0/">技巧学习</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E8%87%AA%E5%B7%B1%E5%AD%A6%E4%B9%A0/">自己学习</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/mousejerry/categories/%E8%AF%BE%E5%A0%82%E5%AD%A6%E4%B9%A0/">课堂学习</a><span class="category-list-count">5</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">最新文章</h3>
        <div class="widget">
            <ul id="recent-post" class="">
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/08/10/test/" class="thumbnail">
    
    
        <span style="background-image:url(https://ejs.bootcss.com/assets/images/jake_display.png)" alt="test" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"></p>
                            <p class="item-title"><a href="/mousejerry/2020/08/10/test/" class="title">test</a></p>
                            <p class="item-date"><time datetime="2020-08-10T01:15:21.000Z" itemprop="datePublished">2020-08-10</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/08/05/Vue-Router%E5%B0%8F%E6%8B%93%E5%B1%95/" class="thumbnail">
    
    
        <span style="background-image:url(https://ejs.bootcss.com/assets/images/jake_display.png)" alt="Vue Router知识小补充" class="thumbnail-image"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E8%87%AA%E5%B7%B1%E5%AD%A6%E4%B9%A0/">自己学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/08/05/Vue-Router%E5%B0%8F%E6%8B%93%E5%B1%95/" class="title">Vue Router知识小补充</a></p>
                            <p class="item-date"><time datetime="2020-08-05T01:17:50.000Z" itemprop="datePublished">2020-08-05</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/07/28/php%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E8%AF%BE%E5%A0%82%E5%AD%A6%E4%B9%A0/">课堂学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/07/28/php%E6%95%B0%E7%BB%84%E7%9A%84%E5%B8%B8%E7%94%A8%E5%87%BD%E6%95%B0/" class="title">php数组的常用函数</a></p>
                            <p class="item-date"><time datetime="2020-07-28T01:58:18.000Z" itemprop="datePublished">2020-07-28</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/07/24/php%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E6%8A%80%E5%B7%A7%E5%AD%A6%E4%B9%A0/">技巧学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/07/24/php%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/" class="title">php开发环境搭建</a></p>
                            <p class="item-date"><time datetime="2020-07-24T07:28:40.000Z" itemprop="datePublished">2020-07-24</time></p>
                        </div>
                    </li>
                
                    <li>
                        
                        <div class="item-thumbnail">
                            <a href="/mousejerry/2020/07/23/vscode%E9%85%8D%E7%BD%AEphpcs/" class="thumbnail">
    
    
        <span class="thumbnail-image thumbnail-none"></span>
    
</a>

                        </div>
                        
                        <div class="item-inner">
                            <p class="item-category"><a class="article-category-link" href="/mousejerry/categories/%E6%8A%80%E5%B7%A7%E5%AD%A6%E4%B9%A0/">技巧学习</a></p>
                            <p class="item-title"><a href="/mousejerry/2020/07/23/vscode%E9%85%8D%E7%BD%AEphpcs/" class="title">vscode配置phpcs</a></p>
                            <p class="item-date"><time datetime="2020-07-23T09:06:35.000Z" itemprop="datePublished">2020-07-23</time></p>
                        </div>
                    </li>
                
            </ul>
        </div>
    </div>


    
        
    <div class="widget-wrap">
        <h3 class="widget-title">归档</h3>
        <div class="widget">
            <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/08/">八月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/07/">七月 2020</a><span class="archive-list-count">8</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/06/">六月 2020</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/05/">五月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/04/">四月 2020</a><span class="archive-list-count">2</span></li><li class="archive-list-item"><a class="archive-list-link" href="/mousejerry/archives/2020/03/">三月 2020</a><span class="archive-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap">
        <h3 class="widget-title">标签</h3>
        <div class="widget">
            <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/PHP/" rel="tag">PHP</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/apache/" rel="tag">apache</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/express/" rel="tag">express</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/js/" rel="tag">js</a><span class="tag-list-count">2</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/node-js/" rel="tag">node.js</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/php/" rel="tag">php</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/python/" rel="tag">python</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/vscode-%E6%8F%92%E4%BB%B6/" rel="tag">vscode,插件</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/vue/" rel="tag">vue</a><span class="tag-list-count">4</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/vuex/" rel="tag">vuex</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/webpack/" rel="tag">webpack</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E5%89%8D%E7%AB%AF/" rel="tag">前端</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E5%90%8E%E7%AB%AF/" rel="tag">后端</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/" rel="tag">微信小程序</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" rel="tag">数据结构</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E6%B5%8B%E8%AF%95/" rel="tag">测试</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E7%88%AC%E8%99%AB/" rel="tag">爬虫</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/mousejerry/tags/%E9%9A%8F%E7%AC%94/" rel="tag">随笔</a><span class="tag-list-count">1</span></li></ul>
        </div>
    </div>

    
        
    <div class="widget-wrap widget-list">
        <h3 class="widget-title">链接</h3>
        <div class="widget">
            <ul>
                
                    <li>
                        <a target="_blank" rel="noopener" href="http://hexo.io">Hexo</a>
                    </li>
                
            </ul>
        </div>
    </div>


    
    <div id="toTop" class="fa fa-angle-up"></div>
</aside>
            
        </div>
        <footer id="footer">
    <div class="outer">
        <div id="footer-info" class="inner">
            &copy; 2020 smalljerry<br>
            Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>. Theme by <a target="_blank" rel="noopener" href="http://github.com/ppoffice">Hexo</a>
            .<br/><a target="_blank" rel="noopener" href="http://github.com/ghaseminya"></a>

            <a href="">lala</a>
        </div>
    </div>
</footer>

        
    
    <script>
    var disqus_config = function () {
        
            this.page.url = 'http://dsjerry.gitee.io/mousejerry/2020/04/03/%E8%87%AA%E5%AD%A6Vue-%E7%BB%84%E4%BB%B6%E5%9F%BA%E7%A1%80/';
        
        this.page.identifier = '自学Vue-组件基础';
    };
    (function() { 
        var d = document, s = d.createElement('script');  
        s.src = '//' + 'dsjerry' + '.disqus.com/embed.js';
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>



    
        
<script src="/mousejerry/libs/lightgallery/js/lightgallery.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-thumbnail.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-pager.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-autoplay.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-fullscreen.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-zoom.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-hash.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-share.min.js"></script>

        
<script src="/mousejerry/libs/lightgallery/js/lg-video.min.js"></script>

    
    
        
<script src="/mousejerry/libs/justified-gallery/jquery.justifiedGallery.min.js"></script>

    



<!-- Custom Scripts -->

<script src="/mousejerry/js/main.js"></script>


    </div>
</body>
</html>